What

Display new notice styles for the shortcode-based cart and checkout.

Fixes #12042

Why

In #8659, @mikejolley updated the shopper notice styles. Until now, these styles were only visible when the store was using the Cart or the Checkout block. This PR ensures that the new styles are now applied universally, regardless of whether the store uses a Cart or Checkout block.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

1. Install and activate the Code Snippets plugin.
2. Add the following code snippet to the site:

add_action( 'woocommerce_before_cart', 'test_notice_styles' );
add_action( 'woocommerce_before_checkout_form', 'test_notice_styles' );
function test_notice_styles() {
  if ( function_exists( 'wc_add_notice' ) ) {
    wc_add_notice( 'Error notice with link #1 <a href="#">Click me</a>', 'error' );
    wc_add_notice( 'Error notice with link #2 <a href="#">Click me</a>', 'error' );
    wc_add_notice( 'Error notice with link #3 <a href="#">Click me</a>', 'error' );
    wc_add_notice( 'Error notice with button #1 <a class="wc-forward">Click me</a>', 'error' );
    wc_add_notice( 'Error notice with button #2 <a class="wc-forward">Click me</a>', 'error' );
    wc_add_notice( 'Error notice with button #3 <a class="wc-forward">Click me</a>', 'error' );
    wc_add_notice( 'Success notice with link <a href="#">Do the thing</a>', 'success' );		
    wc_add_notice( 'Success notice with button <a class="wc-forward">Click me</a>', 'success' );		
    wc_add_notice( 'Info notice with link <a href="#">Click me</a>', 'notice' );		
    wc_add_notice( 'Info notice with button <a class="wc-forward">Click me</a>', 'notice' );
  }
}

3. Install the following themes:
   • Twenty Twenty-One (classic theme)
   • Twenty Twenty (classic theme)
   • Twenty Nineteen (classic theme)
   • Twenty Seventeen (classic theme)
   • Twenty Sixteen (classic theme)
   • Twenty Fifteen (classic theme)
   • Twenty Fourteen (classic theme)
   • Twenty Thirteen (classic theme)
   • Twenty Twelve (classic theme)
   • Twenty Eleven (classic theme)
   • Twenty Ten (classic theme)
4. Activate the Twenty Twenty-One theme.
5. Create a test page and add the following shortcode to it:

[woocommerce_cart]

6. Create a test page and add the following shortcode to it:

[woocommerce_checkout]

7. Go to /wp-admin/admin.php?page=wc-settings&tab=advanced and verify that no Cart page or Checkout page is selected:

8. Go to the frontend and add a product to the cart.
9. Check the notices in the shortcode-based cart and checkout page against all themes that have been installed in step 3.
10. Verify that the notices look consistent in all default themes.

• Do not include in the Testing Notes
• Should be tested by the development team exclusively

Screenshots or screencast

Twenty Twenty-One

Before:

After:

Twenty Twenty

Before:

After:

Twenty Nineteen

Before:

After:

Twenty Seventeen

Before:

After:

Twenty Sixteen

Before:

After:

Twenty Fifteen

Before:

After:

Twenty Fourteen

Before:

After:

Twenty Thirteen

Before:

After:

Twenty Twelve

Before:

After:

Twenty Eleven

Before:

After:

Twenty Ten

Before:

After:

Cross-browser compatibility

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental
• N/A

Checklist

Required:

• This PR has either a [type] label or a [skip-changelog] label.
• This PR is assigned to a milestone.

Conditional:

• This PR has a UI change and has been cross-browser tested at different viewport sizes on both the frontend and in the editor.
• This PR has a changelog description (if [skip-changelog] label is not present).
• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces, and I've updated this doc.
• This PR has been accessibility tested.
• This PR has had any necessary documentation added/updated.

Changelog

Enable new notice styles for all themes